Mermaid Syntax - fa-symbol

|## Mermaid Syntax

|### reference

【Qiitaでも使える】テキストから図が生成できるMermaidについてのザックリ解説

https://qiita.com/b-mente/items/97a4296666faccd53a72

|### mermaid syntax sample

code:mermaid_base.css

graph TD

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef l color:gray, fill:white, font-size:x-large;

classDef xl color:gray, fill:white, font-size:xxx-large;

classDef xlinfo color:gray, fill:white, font-size:xx-large, width:50px, text-alian:center;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1node syntax sample

%% icons

customerfa:fa-user fa-user:::transp2

end

mermaid version

code:info.mmd

info

|### Basic node syntax

code:syntax_samlpe.mmd

graph TD

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef actor fill:#fff, font-size:xxx-large, stroke:transparent

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1node syntax sample

%% node definition

actor((fa:fa-user-circle)):::actor

object["object \nexpr"]

procedure"[[procedure \nexpr"]]

preparation{{"{{prepared \nprocedure expr}}"}}

service(["(service\nprocessed)"])

state("(state\nof object)")

end

code:syntax_sample2.mmd

graph TD

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1flow syntax sample

label"label":::transp

startpoint((.)):::white

endpoint((( ))):::black

port..:::white

enum{" "}

conposition{ }:::black

if{"{{}}"}

if2{".."}:::white

condition[/"/conditioning\n/"/]

loopTop[\"\Loop cond\n/"/]

end

code:syntax_sample3.mmd

graph TD

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1I/O syntax sample

input[/"/input\nrequest/"/]

memory[\"\global memory\ntemporary\"\]

db[("(database)")]

output>">output\ndocumentation]"]

filefa:fa-save:::transp2

emailfa:fa-envelope-open:::transp2

end

|### Basic relations syntax

code:relations.mmd

graph

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef l color:gray, fill:white, font-size:x-large;

classDef xl color:gray, fill:white, font-size:xxx-large;

classDef xlinfo color:gray, fill:white, font-size:xx-large, width:50px, text-alian:center;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

s1start --> e1stop

s2start --- e2stop

s3start -.-> e3stop

s4start -. arrow .-> e4stop

s5start ==> e5stop

%% s6start ~~> e6stop %% not work

s7start --o e7stop

s8start --x e8stop

s9start -.-o e9stop

sastart -.-x eastop

sbstart ---> ebstop

table:line lenght

Length 1 2 3

Normal --- ---- -----

Thick === ==== =====

Dotted -.- -..- -...-

|### Icons

https://fontawesome.com/v4/icons/

|#### base

code:base-symbol.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef l color:gray, fill:white, font-size:x-large;

classDef xl color:gray, fill:white, font-size:xxx-large;

classDef xlinfo color:gray, fill:white, font-size:xx-large, width:50px, text-alian:center;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icon sample 2

%% icons

info((fa:fa-info)):::xlinfo

issue(fa:fa-info):::xlinfo

question(fa:fa-question):::l

principle(fa:fa-exclamation):::l

end

code:icons-users.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icons for user

%% icons

customerfa:fa-user fa-user:::transp2

userfa:fa-user-circle fa-user-circle:::transp2

groupfa:fa-users fa-users:::transp2

end

code:icons-mail.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icons for mail

%% icons

emailfa:fa-envelope fa-envelope:::transp2

emailopenedfa:fa-envelope-open fa-envelope-open:::transp2

inboxfa:fa-inbox fa-inbox:::transp2

atfa:fa-at fa-at:::transp2

end

code:icons-terminal.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icons for clients

%% icons

desktopfa:fa-desktop fa-desktop:::transp2

laptopfa:fa-laptop fa-laptop:::transp2

keyboardfa:fa-keyboard fa-keyboard:::transp2

mobilefa:fa-mobile fa-mobile:::transp2

microphonefa:fa-microphone fa-microphone:::transp2

barcodefa:fa-barcode fa-barcode:::transp2

qrcodefa:fa-qrcode fa-qrcode:::transp2

end

code:icons-files.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef xl color:gray, fill:white, font-size:xxx-large;

classDef xlinfo color:gray, fill:white, font-size:xxx-large, width:50px, text-alian:center;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icon for backend

%% icons

filefa:fa-save fa-save:::transp2

folderfa:fa-folder fa-folder:::transp2

artifactfa:fa-file fa-file:::transp2

databasefa:fa-database fa-database:::transp2

stickyfa:fa-sticky-note fa-sticky-note:::transp2

codefa:fa-code fa-code:::transp2

end

|#### Icons for Discourse Analysis

code:icons-design-base.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef xl color:gray, fill:white, font-size:xxx-large;

classDef xlinfo color:gray, fill:white, font-size:xxx-large, width:50px, text-alian:center;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icon sample 2

%% icons

timelinefa:fa-hourglass fa-hourglass:::transp2

clockfa:fa-clock fa-clock:::transp2

calendarfa:fa-calendar fa-calendar:::transp2

locationfa:fa-map-marker fa-map-marker:::transp2

directionfa:fa-compass fa-compass:::transp2

eyefa:fa-eye fa-eye:::transp2

end

code:icons6.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icon sample 6

%% icon definitions

question2fa:fa-question-circle fa-question-circle:::transp2

quatefa:fa-quote-right fa-quote-right:::transp2

anchorfa:fa-anchor fa-anchor:::transp2

banfa:fa-ban fa-ban:::transp2

end

|#### Icons for Issue Analysis

code:require-symbol.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1requirement

%% icons

goalfa:fa-bullseye fa-bullseye:::transp2

assessfa:fa-search fa-search:::transp2

riskfa:fa-exclamation-triangle fa-exclamation-triangle:::transp2

resourcefa:fa-battery-half fa-battery-half:::transp2

capabilityfa:fa-cubes fa-cubes:::transp2

end

code:icons3.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef xl color:gray, fill:white, font-size:xxx-large;

classDef xlinfo color:gray, fill:white, font-size:xxx-large, width:50px, text-alian:center;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icon sample 3

%% icons

giftfa:fa-gift fa-gift:::transp2

creatorfa:fa-signal fa-signal:::transp2

thumbsupfa:fa-thumbs-up fa-thumbs-up:::transp2

heartfa:fa-heart fa-heart:::transp2

gainfa:fa-smile fa-smile:::transp2

painfa:fa-frown fa-frown:::transp2

end

|#### Others icons

code:icons6.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icon for issues

%% icon definitions

question2fa:fa-question-circle fa-question-circle:::transp2

rootfa:fa-sitemap fa-sitemap:::transp2

calloutfa:fa-comment fa-comment:::transp2

commentsfa:fa-comments fa-comments:::transp2

ideafa:fa-lightbulb fa-lightbulb:::transp2

end

code:icons6.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icon issues 2

%% icon definitions

thumbsupfa:fa-thumbs-up fa-thumbs-up:::transp2

keyfa:fa-key fa-key:::transp2

bookfa:fa-book fa-book:::transp2

briefcasefa:fa-briefcase fa-briefcase:::transp2

cloudfa:fa-cloud fa-cloud:::transp2

end

code:icons7.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icon for web documents

%% icon definitions

starfa:fa-star fa-star:::transp2

homefa:fa-home fa-home:::transp2

bookmarkfa:fa-bookmark fa-bookmark:::transp2

linkfa:fa-link fa-link:::transp2

uploadfa:fa-upload fa-upload:::transp2

downloadfa:fa-download fa-download:::transp2

end

code:icons8.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icon for development

%% icon definitions

configfa:fa-wrench fa-wrench:::transp2

settingfa:fa-cogs fa-cogs:::transp2

pluginfa:fa-plug fa-plug:::transp2

bugfa:fa-bug fa-bug:::transp2

bombfa:fa-bomb fa-bomb:::transp2

end

code:icons2.mmd

graph LR

classDef default fill:#fff, color:gray, stroke:gray, font-size:1.2em, font-family:monospace;

classDef white color:white;

classDef black color:black, fill:black;

classDef transp stroke:transparent, color: blue, font-weight:normal, font-size:xx-large;

classDef transp2 stroke:transparent, color: gray, font-weight:normal, font-size:xxx-large;

%% ------------------------------------------------------

%% syntax sample

subgraph paragraph1icon for others

%% icons

camerafa:fa-camera fa-camera:::transp2

filmfa:fa-film fa-film:::transp2

imagefa:fa-image fa-image:::transp2

industryfa:fa-industry fa-industry:::transp2

buildingfa:fa-building fa-building:::transp2

end

#mermaid #icon grain.icon